<template>
    <div id="accountEdit">
        <!-- 修改账户信息的视图 -->
         <el-dialog
            title="编辑"
            :visible.sync="dialogVisible"
            width="60%"
            :before-close="handleClose"
           >
        <table class="table table-bordered table-hover" >
             <tbody>
                <tr>
                    <td>账户名</td>
                    <td>
                        <input name="账户名" v-model="accountInfo.accountName" v-validate="'required|alpha'" :class="{'input': true, 'is-danger': errors.has('账户名') }" type="text" placeholder="账户名">
                        <i v-show="errors.has('账户名')" class="fa fa-warning"></i>
                        <span v-show="errors.has('账户名')" class="help is-danger">{{ errors.first('账户名') }}</span>
                    </td>
                    <td>密码</td>
                    <td>
                        <input name="密码" v-model="accountInfo.password" v-validate="'required|password'" :class="{'input': true, 'is-danger': errors.has('密码') }" type="text" placeholder="密码">
                        <i v-show="errors.has('密码')" class="fa fa-warning"></i>
                        <span v-show="errors.has('密码')" class="help is-danger">{{ errors.first('密码') }}</span>
                    </td>
                </tr>
                <tr>
                    <td>邮箱地址</td>
                    <td>
                       <p :class="{ 'control': true }">
                            <input  v-model="accountInfo.emailAddress" v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('邮箱地址') }" name="邮箱地址" type="text" placeholder="邮箱地址">
                            <span v-show="errors.has('邮箱地址')" class="help is-danger">{{ errors.first('邮箱地址') }}</span>
                        </p>
                    </td>
                     <td>真名</td>
                    <td>
                         <input name="真名" v-model="accountInfo.realName" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('真名') }" type="text" placeholder="真名">
                        <i v-show="errors.has('真名')" class="fa fa-warning"></i>
                        <span v-show="errors.has('真名')" class="help is-danger">{{ errors.first('真名') }}</span>
                    </td>
                </tr>
                <tr>
                    <td>描述</td>
                    <td>
                         <el-row >
                            <el-col>
                                <el-input v-model="accountInfo.description" placeholder="请输入内容"></el-input>
                            </el-col>
                        </el-row>
                    </td>
                    <td>昵称</td>
                    <td>
                        <input name="昵称" v-model="accountInfo.nickName" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('昵称') }" type="text" placeholder="昵称">
                        <i v-show="errors.has('昵称')" class="fa fa-warning"></i>
                        <span v-show="errors.has('昵称')" class="help is-danger">{{ errors.first('昵称') }}</span>
                    </td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                         <el-row>
                            <el-col>
                                <el-switch
                                v-model="accountInfo.status"
                                active-text="启用"
                                inactive-text="禁用">
                                </el-switch>
                            </el-col>
                        </el-row>
                    </td>
                    <td>学校</td>
                    <td>
                        <el-select filterable v-model="accountInfo['campusId']" @click.native="loadData('campus','campus')">
                            <el-option
                            v-for="(item,key) in campus" 
                            :key = key
                            :label="item.campusName"
                            :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </td>
                </tr>
                <tr >
                    <td>角色列表</td>
                    <td colspan="4">
                        <el-row>
                         <el-col> 
                                <el-checkbox-group v-model="checkedRoles" @change="handleCheckedCitiesChange">
                                    <el-checkbox v-for="(item,key) in allRoles" :label="item.roleName" :key=key >     
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-col>
                        </el-row>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4" style="text-align:right">
                        <el-row>
                            <el-col :span="24" >
                            <el-button type="primary" @click="updateAccount">更新</el-button>
                                <el-button type="danger" @click="handleClose">取消</el-button>
                            </el-col>
                        </el-row>
                    </td>
                </tr>
            </tfoot>
        </table>
        </el-dialog>
    </div>
</template>

<script>
import qs from 'qs'
import cityCampusMixin from '@/Mixins/cityCampusMixin'
export default {
    mixins: [cityCampusMixin],
    data(){
        return {
            imageUrl: '',
            status: true,
            dialogVisible: true,
            accountInfo: {
                'campusId': '',
            },
            allRoles: [], //所有角色
            checkedRoles: [], //选中的角色
            indeterminate: true, //设置 indeterminate 状态，只负责样式控制
            campus:[]
        }
    },
    computed: {
        showAllRoles(){
            var rs;
            if(this.allRoles.length){
                rs = this.toTree(this.allRoles);
            }
            return rs;
        }
    },
     methods: {
        handleClose(done) {
            this.dialogVisible = false;
            this.$router.go(-1);
        },
        handleAvatarSuccess(){

        },
        beforeAvatarUpload(){

        },
        loadData(type,data){
            var url = window.baseURL+`/backstage/${type}/findByPage?token=${this.$token}`;
                this.$http.get(url)
            .then((response)=>{
                this[data] = response.data.data.list.results;
            })
            .catch((error)=>{
                console.log(error);
            })
        },
      updateAccount(){
          var updateURL = window.baseURL+"/backstage/account/update"
          this.accountInfo.status = Number(this.status);
            var postData = {
                campusId: this.accountInfo.campusId,
                accountId: this.accountInfo.accountId,
                accountName: this.accountInfo.accountName,
                password: this.accountInfo.password,
                nickName: this.accountInfo.nickName,
                realName: this.accountInfo.realName,
                headPicture: this.accountInfo.headPicture,
                emailAddress: this.accountInfo.emailAddress,
                emailPassword: this.accountInfo.emailPassword,
                description: this.accountInfo.description,
                status: Number(this.accountInfo.status),
                token: this.$token
            }
          this.$http.post(updateURL,qs.stringify(postData))
          .then((response)=>{
            this.$router.go(-1);
          })
          .catch(()=>{
              
          })

        var insertAccountRoleURL = window.baseURL+"/backstage/account/insertAccount"
        var roleIDStr = "";

          this.checkedRoles.forEach(element => {
              this.allRoles.forEach((ele)=>{
                  if(element === ele.roleName){
                      roleIDStr += ele.roleId+",";
                  }
              })
          });
        roleIDStr = roleIDStr.slice(0,-1);

        this.$http.post(insertAccountRoleURL,qs.stringify({accountId: this.accountInfo.accountId,roles: roleIDStr,token: this.$token}))
        .then((response)=>{
            //插入成功之后,回显数据
            
        })
        .catch((error)=>{
            console.log(error);
        })
      },
      handleCheckAllChange(value){
      },
      //处理角色选中事件
      handleCheckedCitiesChange(value){
       
      }
    },
    created(){
        // 访问账户的基本信息
         var accountURL = window.baseURL+"/backstage/account/find?accountId="+this.$route.params.accountId+"&token="+this.$token;
         this.$http.get(accountURL)
          .then((response)=>{
                this.accountInfo = response.data.data;
                // this.accountInfo.campusId = '测试'
                var promise = this.loadSingleCampusById(this.accountInfo.campusId);
                promise.then((response)=>{
                    this.accountInfo.campusId = response.data.data.campusName;
                })
          })
          .catch(function(error){
          })
        //  访问所有的角色 /backstage/account/getRoles
        var allRolesURL = window.baseURL+"/backstage/role/findAllRole?token="+this.$token;
        this.$http.get(allRolesURL)
        .then((response)=>{
            this.allRoles = response.data.data;
        })
        .catch((error)=>{
            console.log(error);
        })
        // 获取当前账户拥有的角色
        var accountURL = window.baseURL+"/backstage/account/getRoles?accountId="+this.$route.params.accountId+"&token="+this.$token;
        this.$http.get(accountURL)
        .then((response)=>{
            response.data.data.forEach((element)=>{
                this.checkedRoles.push(element.roleName);
            })
        })
        .catch((error)=>{
            console.log(error);
        })
    },
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
    border: 2px solid black;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>
